import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter01/pages/splash/illustration_controller.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

class Splash extends StatefulWidget {
  const Splash({Key? key}) : super(key: key);

  @override
  _SplashState createState() => _SplashState();
}

class _SplashState extends State<Splash> {
  final controller = Get.find<IllustrationController>();

  late List illustrations = controller.illustrations;

  int get illustrationsLen => illustrations.length;

  int currentIndex = 0;

  @override
  initState() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            child: Stack(
      fit: StackFit.expand,
      children: [
        // GridView.builder(
        //     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        //       mainAxisSpacing: 5,
        //       crossAxisSpacing: 5,
        //       crossAxisCount: 3,
        //     ),
        //     itemCount: illustrationsLen,
        //     itemBuilder: (context, index) {
        //       final illustration = illustrations[index];
        //       return SvgPicture.asset(illustration.path);
        //     }),
        PageView.builder(
            onPageChanged: (index) {
              controller.pageIndex.value = index;
              // setState((){
              //   currentIndex = index;
              // });
            },
            itemCount: illustrationsLen,
            itemBuilder: (context, index) {
              final illustration = illustrations[index];
              return Container(
                color: Colors.white,
                // alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SvgPicture.asset(illustration.path),
                    SizedBox(
                      height: 30,
                    ),
                    Text(illustration.title,style:TextStyle(fontSize: 20,fontWeight: FontWeight.bold,color:Colors.black38)),
                  ],
                ),
              );
            }),
        Positioned(
            left: 0,
            right: 0,
            bottom: MediaQuery.of(context).padding.bottom + 30,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                for (int index = 0; index < illustrationsLen; index++)
                  Obx(() => Dot(
                        active: index == controller.pageIndex.value,
                      ))
              ],
            ))
      ],
    )));
  }
}

class Dot extends StatelessWidget {
  final bool active;
  Dot({this.active = false});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 8,
      height: 8,
      margin: EdgeInsets.symmetric(horizontal: 2),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: active ? Colors.grey.withOpacity(0.7) : Colors.grey,
      ),
    );
  }
}
